<template>
	<div class="carousel">
		<el-carousel height="150px" :arrow="datas.mode == 1 ? 'always' : ''">
			<el-carousel-item v-for="(item, index) in datas.list" :key="index">
				<div class="carousel-img">
					<div v-if="item.type == 'image'">
						<el-image :src="STATIC_URL + item.src" fit="cover" class="img" v-if="item.src != ''" />
						<el-image v-else :src="img" fit="cover" class="img"></el-image>
					</div>
					<div v-else>
						<el-image :src="STATIC_URL + item.poster" fit="cover" class="img" v-if="item.poster != ''" />
						<el-image v-else :src="img" fit="cover" class="img"></el-image>
					</div>
				</div>
			</el-carousel-item>
		</el-carousel>
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="carousel">
import { ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import img from '/@/assets/decoration/images/imgs.png';
const props = defineProps({
	datas: {},
});
</script>

<style scoped lang="scss">
.carousel {
	position: relative;
	.carousel-img {
	}
	.img {
		height: 150px;
		width: 100%;
	}
}
</style>
